import { useState, useEffect } from 'react'
import { View, Image, Text, Button } from '@tarojs/components'
import { useRouter } from '@tarojs/taro'
import Taro from '@tarojs/taro'
import { get } from '../../../aiaxios/request'
import { API_BASE_URL } from '../../../../config/env'
import { formatLocalDateTime } from '../../../utils/aidateFormat'
import './TensorFlow.scss'

export default function TensorFlow() {
  const router = useRouter()
  const [apiData, setApiData] = useState<any>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [errorMsg, setErrorMsg] = useState<string>('')

  const imageId = router.params.imageId

  const loadImage = async () => {
    try {
      console.log('简化版本 - 开始加载图片, ID:', imageId)
      const response = await get(`/aiimg/getById?id=${imageId}`)
      console.log('简化版本 - API响应:', response)
      
      if (response?.code === 200 && response?.data) {
        console.log('简化版本 - 设置数据')
        setApiData(response.data)
        setIsLoading(false)
        setErrorMsg('')
        console.log('简化版本 - 设置完成')
      } else {
        setErrorMsg('获取图片失败')
        setIsLoading(false)
      }
    } catch (error) {
      console.error('简化版本 - 请求失败:', error)
      setErrorMsg('网络请求失败')
      setIsLoading(false)
    }
  }

  useEffect(() => {
    if (imageId) {
      loadImage()
    } else {
      setErrorMsg('缺少图片ID')
      setIsLoading(false)
    }
  }, [imageId])

  console.log('简化版本渲染:', { isLoading, errorMsg, hasData: !!apiData })

  if (isLoading) {
    return (
      <View className='tensorflow-container'>
        <View className='loading-container'>
          <Text className='loading-text'>正在加载图片...</Text>
        </View>
      </View>
    )
  }

  if (errorMsg || !apiData) {
    return (
      <View className='tensorflow-container'>
        <View className='error-container'>
          <Text className='error-text'>{errorMsg || '未找到图片'}</Text>
          <Button onClick={() => loadImage()}>重试</Button>
          <Button onClick={() => Taro.navigateBack()}>返回</Button>
        </View>
      </View>
    )
  }

  return (
    <View className='tensorflow-container'>
      <View className='image-preview-section'>
        <Image
          src={`${API_BASE_URL}${apiData.img}`}
          className='preview-image'
          mode='aspectFit'
        />
        <View className='image-info'>
          <Text className='image-name'>{apiData.name}</Text>
          <Text className='upload-time'>
            上传时间: {formatLocalDateTime(apiData.uploadTime)}
          </Text>
        </View>
      </View>

      <View className='analysis-section'>
        <View className='section-header'>
          <Text className='section-title'>AI智能分析</Text>
        </View>
        <View className='analysis-content'>
          <Text className='analysis-text'>图片加载成功！</Text>
          <Text className='analysis-description'>
            您的照片已成功上传和显示。
          </Text>
        </View>
      </View>

      <View className='action-section'>
        <Button 
          className='action-button primary'
          onClick={() => Taro.showToast({ title: '重新分析...', icon: 'loading' })}
        >
          重新分析
        </Button>
        <Button 
          className='action-button secondary'
          onClick={() => Taro.navigateBack()}
        >
          返回
        </Button>
      </View>
    </View>
  )
}
